<link rel="stylesheet" href="/cn/css/exerciseNew/writeResult.css?v=1.3.1">
<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>
<script src="https://file.viplgw.cn/ui/public/echarts.js"></script>
<style>
    .exerciseCenter {
        /*height: calc(100% - 30px);*/
        height: auto;
        align-items: start;
        margin-bottom: 20px;
    }

    .subject, .fullText {
        height: auto;
        width: 575px;
        flex: none;
        box-sizing: border-box;
    }

    .articleText,#rhetorical {
        flex: none;
        width: 575px;
        margin-top: 70px;

    }

    .container {
        position: relative;
    }

    .switchCover {
        top: 10px;
    }
</style>
<section id="exerciseDetail" v-cloak>
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="w12 headContent">
                <div class="headTitle">{{questionData!=''?questionData.parent.name:''}}</div>
                <div class="operateBtn">
                    <a href="/cn/exercise/write?category=all" class="upData">退出</a>
                    <a :href="'/cn/exercise/write-detail?content_id='+ content_id" class="parcticeAgain"
                       style="margin-right: 25px;background:#795FC2;color: white">重新练习</a>
                    <img src="/cn/images/exerciseNew/16@2x.png" alt="" class="fullScreen" @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>

    <input name="content_id" value="<?php echo $content_id ?>" type="hidden" id="content_id">

    <!-- 做题部分 -->
    <div class="container">
        <div class="switchCover">
            <div class="switchLeft">
                <a href="javascript:void (0)" :class="isSwitch?'':'on'" @click="isSwitch = false">查看问题</a>
                <a href="javascript:void (0)" :class="isSwitch?'on':''" @click="isSwitch = true">参考范文</a>
            </div>
        </div>
        <div class="exerciseCenter">


            <!-- 文章 -->
            <div class="articleText" id="articleText" v-if="!isSwitch">
                <div v-html="questionData!=''?questionData.parent.description:''"></div>
                <img :src="questionData!=''&&questionData.parent.image!=''?questionData.parent.image:''" alt="">
            </div>
            <!-- 参考范文 -->
            <div id="rhetorical" v-cloak v-if="isSwitch">
                <p>参考范文</p>
                <div v-html="questionData!=''?questionData.son[0].description:''"></div>
            </div>
            <!-- 题目 -->
            <div class="subject">
                <!-- 我的回答 -->
                <div id="userAnswer">
                    <p>我的回答</p>
                    <div v-html="questionData!=''?questionData.son[0].userAnswer:''"></div>
                </div>
                <div class="totalWords" style="background: white">
                    <p>word count: <span>{{count}}</span></p>
                </div>
            </div>
        </div>
        <div class="report_btn">
            <button onclick="showReport(this)"><img
                        src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/report.png">获取智能分析报告
            </button>
        </div>
        <div class="report_section" style="display: none">

            <div class="score_card">
                <div class="report_btn">
                    <button><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/report.png">获取智能分析报告
                    </button>
                </div>
                <div class="score_box">
                    <p class="score_name">我的得分</p>
                    <p class="score_num">{{questionData!=''?questionData.son[0].answerRemark.totalScore:''}}</p>
                    <div class="score_pro"><p class="score_stage"><span></span>
                        </p>
                        <p class="score_total"> 9</p>
                    </div>

                </div>
                <div id="score" style="width: 760px;height: 370px">
                </div>

            </div>
            <!--            <ul class="comment_list" >-->
            <!--                <li class="comment_item">-->
            <!--                    <p class="comment_title">写作任务回应情况 Task Respon</p>-->
            <!--                    <div class="comment_des">-->
            <!--                        {{questionData!=''?questionData.son[0].answerRemark.AllFeatureAdvice.Topic:''}}-->
            <!--                    </div>-->
            <!--                </li>-->
            <!---->
            <!--                <li class="comment_item">-->
            <!--                    <p class="comment_title">连贯与衔接 Cohereece & Cohesionrorem </p>-->
            <!--                    <div class="comment_des">-->
            <!--                        {{questionData!=''?questionData.son[0].answerRemark.AllFeatureAdvice.Structure:''}}-->
            <!--                    </div>-->
            <!--                </li>-->
            <!--                <li class="comment_item">-->
            <!--                    <p class="comment_title">词汇丰富程 Lexical Resourc</p>-->
            <!--                    <div class="comment_des">-->
            <!--                        {{questionData!=''?questionData.son[0].answerRemark.AllFeatureAdvice.WordDiversity:''}}-->
            <!--                    </div>-->
            <!--                </li>-->
            <!--                <li class="comment_item">-->
            <!--                    <p class="comment_title">语法多样性及准确性 Grammatical Range & Accuracy</p>-->
            <!--                    <div class="comment_des">-->
            <!--                        {{questionData!=''?questionData.son[0].answerRemark.AllFeatureAdvice.Grammar:''}}-->
            <!--                    </div>-->
            <!--                </li>-->
            <!--            </ul>-->
            <div class="sentence_comment" v-if="questionData!=''&&sentsFeedback.length>0">
                <p class="sentence_comment_label">按句点评</p>
                <ul class="sentence_comment_list" >

                    <li class="sentence_comment_item" v-for="(item,index) in sentsFeedback"
                        v-if="index<5">
                        <p class="sentence">{{index+1}}. {{item.rawSent}}.</p>
                        <div class="sentence_question">
                            <p v-for="erro in item.errorPosInfos"><span>【{{erro.reason}}】</span></p>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="wechat_box">
                <p class="wechat_text">亲爱的同学: <br>快扫描右方二维码找老师获取</p>
                <p class="wechat_img"><img
                            src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/xuezhang.png"></p>
            </div>
            <input id="GrammarScore" type="hidden"
                   :value="questionData!=''?questionData.son[0].answerRemark.majorScore.grammarScore:''">
            <input
                    id="WordScore" type="hidden"
                    :value="questionData!=''?questionData.son[0].answerRemark.majorScore.wordScore:''">
            <input
                    id="StructureScore" type="hidden"
                    :value="questionData!=''?questionData.son[0].answerRemark.majorScore.structureScore:''">
            <input
                    id="topicScore" type="hidden"
                    :value="questionData!=''?questionData.son[0].answerRemark.majorScore.topicScore:''">


        </div>

    </div>

</section>

<script src="/cn/js/exerciseReview/writeResult.js?v=1.1"></script>

<script>
    window.onload = function () {
        var subjectHeight = $('.subject').height();
        var articleTextHeight = $('.articleText').height();
        console.log('subjectHeight', subjectHeight)
        console.log('articleTextHeight', articleTextHeight)
        if (subjectHeight > articleTextHeight) {
            $('.articleText').css({"height": subjectHeight })
        } else {
            $('.subject').css({"height": articleTextHeight})

        }
    }


    function showReport(_this) {
        $(_this).hide();
        $('.report_section').slideDown();
        var chartDom = document.getElementById('score');
        var myChart = echarts.init(chartDom);
        var option;
        var score = [$('#topicScore').val(), $('#GrammarScore').val(), $('#WordScore').val(), $('#StructureScore').val()]
        console.log('score', score)
        option = {
            color: ['#8855D0'],
            legend: {show: false},
            tooltip: [],
            radar: [
                {
                    indicator: [
                        {name: 'Task Response 写作任务回应', max: 100},
                        {name: 'Grammatical Range& Accuracy语法多样性及准确性', max: 100},
                        {name: 'Lexical Resource词汇丰富程度', max: 100},
                        {name: 'Cohereece&Cohesion 连贯与衔接', max: 100},
                    ],
                    center: ['50%', '53%'],
                    radius: 80,
                    startAngle: 90,
                    splitNumber: 3,
                    shape: 'circle',
                    splitArea: {
                        areaStyle: {
                            color: ['#584F97'],
                            shadowColor: '#A0A0A0',
                            shadowBlur: 10
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    },
                    axisName: {
                        rich: {
                            a: {
                                fontSize: 30,
                                color: '#fff',
                                align: "center"
                            }, b: {
                                fontSize: 14,
                                color: '#fff',
                                lineHeight: 20,
                                align: "center"
                            },
                        },
                        formatter: (a, b) => {
                            console.log('b', b);
                            console.log('a', a);
                            if (a == 'Task Response 写作任务回应') {
                                var arr = ['{a|' + score[0] + '}',
                                    '{b|Task Response\n写作任务回应}']
                                return arr.join('\n')
                            }
                            if (a == 'Cohereece&Cohesion 连贯与衔接') {
                                var arr = ['{a|' + score[3] + '}',
                                    '{b|Cohereece&Cohesion\n连贯与衔接}']
                                return arr.join('\n')
                            }
                            if (a == 'Lexical Resource词汇丰富程度') {
                                var arr = ['{a|' + score[2] + '}',
                                    '{b|Lexical Resource\n' +
                                    '词汇丰富程度}']
                                return arr.join('\n')
                            }
                            if (a == 'Grammatical Range& Accuracy语法多样性及准确性') {
                                var arr = ['{a|' + score[1] + '}',
                                    '{b|Grammatical Range\n' +
                                    '& Accuracy\n' +
                                    '语法多样性及准确性}']
                                return arr.join('\n')
                            }
                        },

                    }
                },

            ],
            series: [
                {
                    type: 'radar',
                    emphasis: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    data: [
                        {
                            value: score,
                            name: 'Data A',
                            areaStyle: {
                                color: '#DAB3FF'
                            }
                        },

                    ]
                },

            ]
        }
        ;

        option && myChart.setOption(option);
    }


</script>
